<template>
    <el-card style="width: 50% ">
        <template #header>
            <div class="card-header">
                <span>管理员角色</span>
                <el-button class="edit" size="small"  @click="handleOpen">
                    添加角色
                </el-button>
            </div>
        </template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="#" />
            <el-table-column prop="name" label="分类">
                <template #default="scope">
                    <el-tag>{{ scope.row.name}}</el-tag>
                </template>

            </el-table-column>

            <el-table-column label="操作" width='180'>
                <template #default="scope">
                    <el-button @click="handleOpenDialog(scope.row)" class="edit" size="small">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                    </el-button>
                    <el-button size="small" type="danger" @click="handleRemove(scope.row.id,scope.$index)" >
                        <el-icon>
                            <Delete />
                        </el-icon>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <!-- 编辑dialog -->
    <el-dialog v-model="dialogVisible" title="编辑标签">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
            <el-form-item prop="name" label="标签名称">
                <el-input v-model="form.name" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleEdit(formRef)">保存</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 添加 -->
    <el-dialog v-model="dialog" title="添加角色">
        <el-form ref="formReff" :model="table" :rules="rule" label-width="80px">
            <el-form-item prop="name" label="角色名称">
                <el-input v-model="table.name" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialog = false">取消</el-button>
                <el-button type="primary" @click="handleadd(formReff)">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { toRefs, reactive, ref, computed, onMounted, onUpdated } from 'vue';
import Admin from '@/api/admin';
// import { id } from 'element-plus/es/locale';
// import { ElMessageBox } from 'element-plus';
let form = ref({ name: '', });
let table = ref({name:'',});
const dialogVisible = ref(false);
const dialog = ref(false);
// 获取form组件实例对象
let formRef = ref();
let formReff = ref();
const tableData = ref([]);
// 缓存当前行的索引
let current = ref(0);
//打开编辑弹窗
let handleOpenDialog = (data,i) => {
    dialogVisible.value = true;
    //还原表单
    form.value = { ...data };
      //记录当前索引
      current.value = i;
}
//打开添加弹窗
function handleOpen(){
    dialog.value = true;
}
// 表单验证规则
const rule = reactive({
    name: [
        { required: true, message: '请输入添加的角色名称！', trigger: 'blur' },
    ],
});
function handleadd(formEl) {
    //表单验证
    formEl.validate(async (valid, fields) => {
        //通过验证
        if (valid) {
            //发送ajax
            let { status, msg,data } = await Admin.add({ ...table.value });
            if (status) {
                //修改成功
                //操作DOM 
                const newChild = { ...data, ...table.value };
                tableData.value.push(newChild);
                // tableData.value=[...tableData.value]
                table.value=[];
                //关闭弹窗，消息提示
                dialog.value = false;
                ElMessage.success(msg);
            } else {
                //错误提示
                ElMessage.error(msg);
            }

        } else {
            console.log('失败字段', fields);
        }
    });
}
async function loadList() {
    let { status, msg, total, data } = await Admin.role();
    if (status) {
        tableData.value = data;
    }
}
loadList();
// 表单验证规则
const rules = reactive({
    name: [
        { required: true, message: '请输入标签名称！', trigger: 'blur' },

    ],

});

function handleEdit(formEl) {
    //表单验证
    formEl.validate(async (valid, fields) => {
        //通过验证
        if (valid) {
            //发送ajax
            let { status, msg } = await Admin.people(form.value.id, { ...form.value });
            if (status) {
                //修改成功
                //操作DOM
               tableData.value[current.value] = { ...form.value };
                //关闭弹窗，消息提示
                dialogVisible.value = false;
                ElMessage.success(msg);
            } else {
                //错误提示
                ElMessage.error(msg);
            }

        } else {
            console.log('失败字段', fields);
        }
    });
}
//删除操作
function handleRemove(id, i) {
    ElMessageBox.confirm('确定要删除？', '确认删除', { type: 'error', cancelButtonText: '取消', confirmButtonText: '确认' })
        .then(async () => {
            //点击确认
            //发送ajax
            let { status, msg } = await Admin.move(id)
            if (status) {
                ElMessage.success(msg);
                //操作DOM
                tableData.value.splice(i, 1);
            } else {
                ElMessage.error(msg);
            }
        })
        //取消
        .catch(() => {
            //取消
            ElMessage.info('取消成功');
        });
}
</script>
<style lang="less">
.edit {
    background-color: rgb(143, 190, 231);
    color: azure;
}

.card-header {
    display: flex;
    justify-content: space-between;
}
</style>